<template>
	<div class="userInfo">
		<div>
			<el-upload class="avatar-uploader" :action="$http.adornUrl('/sys/oss/upload',1)" :show-file-list="false">
				<img v-if="userInfo.avatar" :src="userInfo.avatar">
				<i v-show="userInfo.avatar" class="el-icon-user-solid"></i>
			</el-upload>
			<div class="userInfo_name">{{userInfo.name}}</div>
			<div class="userInfo_role">{{userInfo.role}}</div>
		</div>
		<el-tabs class="userInfo_setting" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="用户信息" name="1">
				<el-form label-position="top">
					<el-form-item label="账号" prop="username">
						<el-input disabled v-model.trim="userInfo.username"></el-input>
					</el-form-item>
					<el-form-item label="用户名" prop="name">
						<el-input disabled v-model.trim="userInfo.name"></el-input>
					</el-form-item>
					<el-form-item label="角色" prop="role">
						<el-input disabled v-model.trim="userInfo.role"></el-input>
					</el-form-item>
					<!-- <el-form-item>
						<el-button type="primary">保存</el-button>
					</el-form-item> -->
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="修改密码" name="2">
				<el-form label-position="top">
					<el-form-item label="原密码" prop="password">
						<el-input show-password clearable type="password" v-model.trim="dataForm.password"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="newPassword">
						<el-input show-password clearable type="password"
							v-model.trim="dataForm.newPassword"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirmPassword">
						<el-input show-password clearable type="password"
							v-model.trim="dataForm.confirmPassword"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">保存</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			var validateConfirmPassword = (rule, value, callback) => {
				if (this.dataForm.newPassword !== value) {
					callback(new Error('确认密码与新密码不一致'))
				} else {
					callback()
				}
			}
			return {
				activeName: '2',
				dataForm: {
					password: '',
					newPassword: '',
					confirmPassword: ''
				},
				dataRule: {
					password: [{
						required: true,
						message: '原密码不能为空',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: '新密码不能为空',
						trigger: 'blur'
					}],
					confirmPassword: [{
							required: true,
							message: '确认密码不能为空',
							trigger: 'blur'
						},
						{
							validator: validateConfirmPassword,
							trigger: 'blur'
						}
					]
				},
			}
		},
		computed: {
			userInfo: {
				get() {
					return this.$store.state.userInfo
				}
			}
		},
		methods: {
			handleClick() {

			}
		},
	}
</script>

<style lang="scss">
	.userInfo {
		display: flex;

		>div {
			padding: 30px;
			background: var(--xw-content-bgcolor);
		}

		>div:first-child {
			width: 30%;
			margin-right: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar-uploader {
				width: 80px;
				height: 80px;

				i {
					font-size: 50px;
					width: 100%;
					line-height: 80px;
				}

				>div:hover {
					i {
						font-size: 30px;
						position: absolute;
						top: 0;
						left: 0;
						display: inline-block;
						background: rgba(#000, 0.4);
						color: #fff;

					}

					i:before {
						content: "\e7c3";
					}
				}

				>div {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0 0 2px 2px inset #ddd;
				}
			}
		}

		&_name {
			margin-top: 10px;
			font-weight: bold;
			font-size: 16px;
		}

		&_role {
			margin-top: 10px;
			color: #777;
			font-size: 12px;
		}

		&_setting {
			flex: 1;
		}

		.el-form-item {
			&__content {
				width: 220px;
			}
		}
	}
</style>